import React from 'react';
import Form from 'taro-vform';
import { Picker, View } from '@tarojs/components'
import { AtList, AtListItem } from 'taro-ui'
import "taro-ui/dist/style/components/list.scss";
import dayjs from 'dayjs';
import { useState } from 'react';
export default (props) => {
  const { require, label, onlyKey, placeholder, setting, option, form } = props;
  const [data, setData] = useState('')
  const list = option.map((item) => {
    return {
      label: item,
      value: item,
    };
  })
  return (
    <>
      <Form.Item
        name={onlyKey ? onlyKey : label}
        label={label}
        rules={[{ required: require, message: `${label}不能为空` }]}
      >
        <View>
          <Picker
            value={data}
            mode='selector'
            rangeKey='label'
            onCancel={(e) => {
              console.log(e, 123131231)
            }}
            onChange={(e) => {
              setData(e.target.value)
              form.setFieldValue(
                onlyKey ? onlyKey : label, list[e.target.value].value
              )
            }}
            range={list}
          >
            <AtList>
              <AtListItem title={`请选择${label}`} extraText={list[data] && list[data]['label']} />
            </AtList>
          </Picker>
        </View>
      </Form.Item>

    </>

  );
};
